<template>
  <div>
    <div class="app-container">
      <div class="left">
        <div style="height:60vh" class="timu">
          <el-col v-for="(v, i) in topic" :key="i">
            <div v-if="i == nums">
              <h3>{{ i + 1 }}# {{ topic[i].title }} - 序号{{ topic[i].id }}</h3>
              <div v-for="(v, i) in JSON.parse(v.options)" :key="i" class="nei">
                <input
                  @change="checkbox(v)"
                  style="display:inline;fontSize:16px"
                  type="checkbox"
                />
                {{ v.index }}--{{ v.value }} <br />
              </div>
            </div>
          </el-col>
        </div>

        <div class="btns">
          <el-button type="success" @click="xiayitiClick">{{
            nums + 1 == 50 ? "提交试卷" : "下一个"
          }}</el-button>
          <el-button type="success" v-if="!(nums == 0)" @click.stop="nums -= 1"
            >上一个</el-button
          >
        </div>
      </div>

      <div class="right">
        <ul class="title-nums">
          <li
            v-for="(item, index) in topic"
            :key="index"
            :data-answers="item.answers"
            :style="{
              backgroundColor: nums == index ? 'rgb(0, 183, 255, 0.7)' : ''
            }"
            @click="nums = index"
          >
            {{ index + 1 }}
          </li>
        </ul>

        <div class="percent">
          <el-progress
            type="circle"
            :percentage="0"
            :show-text="false"
          ></el-progress>
          <span>{{ time }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      nums: 0,
      time: "5:00",
      checkboxarr: [],
      checkboxs: {}
    };
  },
  mounted() {
    this.getaddtopic();
  },
  methods: {
    ...mapActions("exam", ["getaddtopic"]),
    xiayitiClick() {
      //最大的 对象 里面包数组 {1：【{选择的答案:123, 正确的答案:123}】}
      this.checkboxs[this.nums] = [
        {
          xuanzedaan: this.checkboxarr,
          zhengquedaan: this.topic[this.nums].answers
        }
      ];
      // console.log(this.checkboxs)
      this.nums++;
    },
    checkbox(val) {
      let che = document.getElementsByClassName("checkboxs");
      for (let a = 0; a < 4; a++) {
        if (this.checkboxarr[a] == val.index) {
          this.checkboxarr.splice(a, 1);
          return;
        }
      }
      this.checkboxarr.push(val.index);
    }
  },
  computed: {
    ...mapState("exam", ["topic"])
  }
};
</script>

<style scoped>
ul {
  list-style: none;
}

.app-container {
  display: flex;
  justify-content: space-between;
}

.app-container > div {
  width: 50%;
}

.btns {
  margin: 26px 0;
}

.btns > button {
  margin: 0 12px;
}

.title-nums > li {
  float: left;
  width: 30px;
  height: 22px;
  border-radius: 11px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  margin: 6px;
  text-align: center;
  line-height: 22px;
  cursor: pointer;
}

.title-nums > li:hover {
  background-color: rgba(252, 248, 213, 0.753);
  color: rgb(26, 30, 252);
}

.hover {
  background-color: rgb(0, 183, 255, 0.7);
}

.nei {
  padding: 20px;
}

.percent {
  width: 126px;
  height: 126px;
  position: relative;
  margin: 216px 260px;
  display: flex;
}

.percent > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}
</style>
